<script setup lang="ts">
	import { useI18n } from 'vue-i18n'
	import { pointsInfo, bankCardInfo, withdrawalApply, configList, getQuickWithdrawCards,getWithdrawalChannel } from '@/api/user'
	import { onMounted, reactive, ref, watch } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { add,convertNumbers } from '@/utils/utils'
	const { t } = useI18n()
	const params =ref( {
		country: 1,
		platform: 0,
		ac_type: 1,
		channel_id:0,
	});
	const countryId=ref(0)
	const baseData = reactive({
		showDetail: false,
		showChannelSelect: false,
		selectedChannel: null as any,
		aircraftUrl: uni.getStorageSync('aircraftUrl'),
		withdrawForm: {
			Charge: 0,
			actual: 0,
			points: 0,
			fixedKey: 0,
		},
		serviceCharges: 0,
		thresholdNum: 0,
		wallet: {} as any,
		cards: {} as any,
		cardsTwo: {} as any,
	})
	//page
	const pagedata = reactive({
	  todayPoints: 0,
	  totalPoints: 0,
	  yesterdayPoints: 0,
	  showLoginOut: false,
	  aircraftUrl: uni.getStorageSync('aircraftUrl'),
	  pagelist: [
	    'index/index',
	    'scan/index',
	    'user/index',
	    'withdraw/index',
	    'user/leaderBoard/index',
	    'login/index',
	    'user/revenue/revenue',
	    'user/withdreawalInfo/withdreawalInfo',
	    'user/message/message',
	    'user/changPassword/changPassword',
	    'user/level/level',
	    'user/whatsApp/index',
	  ],
	})
	const promptAmount = ref<number | null>(null);
	const promptAmountActual = ref<number | null>(null);
	
	const withdrawAmounts = ref<any[]>([])
	const currentWithdrawAmountIndex = ref<number | null>(null)
	const withdrawBtnDisabled = ref(true) 
	const quickRechargeClick = ref(false) 
	
	const query = ref<any>({})
	const maxCount = ref<number>()
	const maxWithdrawCount = ref<any>({})
	
	onLoad((options) => {
		query.value = options
	})
	const pageIndex = ref(4)
	const changPage = (e: number) => {
	  uni.navigateTo({
	    url: '/pages/' + pagedata.pagelist[e],
	  })
	}
	const changMainPage = (e: number) => {
	  console.log(getCurrentPages())
	  //   window.top?.postMessage(`/pages/${pagedata.pagelist[e]}`, window.location.origin)
	  uni.navigateTo({
	    url: '/pages/' + pagedata.pagelist[e],
	  })
	}
	const withdrawAllshow = () => {
		if (baseData.wallet.totalPoints < 1000) return
		baseData.withdrawForm.points = baseData.wallet.totalPoints
		baseData.withdrawForm.Charge = 0.0
		baseData.withdrawForm.actual = baseData.wallet.totalPoints
		baseData.withdrawForm.fixedKey = maxWithdrawCount.value.fixedKey
		quickRechargeClick.value = true
		baseData.showDetail = true
		withdrawAmounts.value = withdrawAmounts.value.map((withdrawAmountsItem, withdrawAmountsIndex) => {
			return {
				...withdrawAmountsItem,
				active: false,
			}
		})
	}
	const showW = () => {
		console.log('baseData.wallet', baseData.wallet)
		if (withdrawBtnDisabled.value) {
			uni.showToast({
				title: t('Please select the withdrawal type'),
				icon: 'none',
			})
			return
		}
		if (quickRechargeClick.value) {
			for (let i = 0; i < withdrawAmounts.value.length; i++) {
				if (withdrawAmounts.value[i].active) {
					baseData.withdrawForm.points = withdrawAmounts.value[i].amount
					baseData.withdrawForm.actual = withdrawAmounts.value[i].actual
					baseData.withdrawForm.Charge = withdrawAmounts.value[i].diffValue
					baseData.withdrawForm.fixedKey = withdrawAmounts.value[i].fixedKey
					break
				}
			}
			baseData.showDetail = true
		}
		if (!quickRechargeClick.value) {
			uni.showToast({
				title: t('Please select the withdrawal type'),
				icon: 'none',
			})
			return
			
			if (baseData.wallet.totalPoints > 550) {
				baseData.withdrawForm.points = 550
				baseData.withdrawForm.Charge = baseData.withdrawForm.points * 0.1 // 10%

				baseData.showDetail = true
			}
			// if (baseData.wallet.totalPoints > (baseData.thresholdNum + Math.floor(baseData.thresholdNum * (baseData.serviceCharges / 100)))) {
			// 	baseData.withdrawForm.points = baseData.thresholdNum
			// 	baseData.withdrawForm.Charge = Math.floor(baseData.thresholdNum * (baseData.serviceCharges / 100))
			// 	baseData.showDetail = true
			// }
			else {
				uni.showToast({
					title:
						t('Starting from') +
						(baseData.thresholdNum + Math.floor(baseData.thresholdNum * (baseData.serviceCharges / 100))) +
						t('points'),
					icon: 'none',
				})
			}
		}
	}
	const getCharge = (e: any) => {
		const points = parseInt(e, 10)
		
		if (points < 550) {
			uni.showToast({
				title: t('The minimum withdrawal amount is 550 points'),
				icon: 'none',
			})
			// setTimeout(function () {
			
			//     baseData.withdrawForm.points = 550;
			// }, 10);
			baseData.withdrawForm.Charge = parseInt(String(points), 10) * 0.1
		} else {
			
			if (parseInt(String(baseData.wallet.totalPoints), 10) <= points) {
				uni.showToast({
					title: t('Withdrawal points cannot exceed the withdrawable points'),
					icon: 'none',
				})
				setTimeout(function () {
					
					let serviceCharges = parseInt(String(baseData.wallet.totalPoints * (baseData.serviceCharges / 100)), 10)
					console.log('serviceCharges', serviceCharges)
					if (points > Number(maxWithdrawCount.value?.content?.split(':')?.[0])) {
						serviceCharges = 0
					}
					baseData.withdrawForm.points = baseData.wallet.totalPoints - serviceCharges
					baseData.withdrawForm.Charge = serviceCharges
				}, 10)
			} else if (points >= 550 && points < Math.abs(Number(maxWithdrawCount.value?.content?.split(':')?.[0]))) {
				
				baseData.withdrawForm.points = points
				
				baseData.withdrawForm.Charge = points * 0.1 
			} else {
				baseData.withdrawForm.points = points
				baseData.withdrawForm.Charge = 0
			}

		}
	}
	const symbol = ref('₹') 
	const lang = ref('en') 
	const selCountryNum = ref(1);
	const selPlatformNum = ref(0);
	
	const allocationList = ref<any>({})
	const multiChannelresult = ref<any[]>([]);
	const initPage = async () => {
		
		const res = await pointsInfo()
		if (res.code == 0) {
			baseData.wallet = res.data
		}
	const req = await getWithdrawalChannel();
				allocationList.value = req.data;
				// debugger;
				//如果选择的是印度国家,因为印度有两个提现渠道要做区分
				if(country.value==1){
					const result = allocationList.value.filter(item => item.country === country.value)
					if(result.length>1){
						// const selectedCountry = result.value.find(item => item.country === country.value);
						params.value.country=country.value;
						// countryId.value=selectedCountry.id
						// selPlatformNum.value = result[0].platform;
						// params.value.platform=result[0].platform;
						// params.value.channel_id=result[0].id;
						const ress = await bankCardInfo({ country: country.value })
						
						// 将渠道信息和银行卡信息结合
						multiChannelresult.value = result.map(channel => {
							// 根据渠道的platform找到对应的银行卡
							const matchingCard = ress.data?.find(card => card.platform === channel.platform)
							return {
								...channel,
								bankCard: matchingCard || null,
								hasBankCard: !!matchingCard
							}
						})
						console.log('multiChannelresult.value',multiChannelresult.value)
						// uni.setStorageSync('platform', 7);
						if (ress.code == 0) {
							if(ress.data.length>1){
								baseData.cards = ress.data[0] || null
								baseData.cardsTwo = ress.data[1] || null
							}else{
								baseData.cards = ress.data[0] || null
							}
							
						}
					} else if(result.length === 1) {
						// 如果只有一个渠道，根据该渠道的country和platform查询银行卡
						const selectedChannel = result[0]
						params.value.country = selectedChannel.country
						params.value.platform = selectedChannel.platform
						params.value.channel_id = selectedChannel.id
						uni.setStorageSync('platform', selectedChannel.platform);
						const ress = await bankCardInfo({ 
							country: selectedChannel.country, 
							platform: selectedChannel.platform 
						})
						
						if (ress.code == 0) {
							baseData.cards = ress.data[0] || null
							baseData.cardsTwo = null
						}
					}
				}else{
					const selectedCountry = allocationList.value.find(item => item.country === country.value);
					params.value.country=selectedCountry.country;
					countryId.value=selectedCountry.id
					uni.setStorageSync('platform', selectedCountry.platform);
					selPlatformNum.value = selectedCountry.platform;
					params.value.platform=selectedCountry.platform;
					params.value.channel_id=selectedCountry.id;
					const ress = await bankCardInfo({ country: country.value, platform: selPlatformNum.value })
					if (ress.code == 0) {
						baseData.cards = ress.data[0] || null
					}
				}
				if(country.value ===1 || country.value ===2 ||country.value ===3){ //India,Indonesia	,Nigeria
					params.value.ac_type=1;
				}else{
					params.value.ac_type=2;
				}
		const rep = await configList({
			type: 1,
			fixedKey: 1,
		})
		if (rep.code == 0) {
			// console.log(rep)
			baseData.thresholdNum = parseInt(rep.data.content, 10) 
		}

		const reps = await configList({
			type: 1,
			fixedKey: 3,
		})
		if (reps.code == 0) {
			// console.log(rep)
			baseData.serviceCharges = parseInt(reps.data.content, 10)
		}
		withdrawBtnDisabled.value = baseData.wallet.totalPoints < 550
		const cardData = await getQuickWithdrawCards()
		withdrawAmounts.value = cardData.data
			.filter((card) => card.ID !== 37)
			.map((item) => {
				const itemContentArr = item.content.split(':')
				return {
					...item,
					amount: Number(itemContentArr[0]),
					actual: Number(itemContentArr[1]),
					diffValue: Number(itemContentArr[0]) - Number(itemContentArr[1]),
					reate:Number(itemContentArr[2]),
					isDisabled: true,
					active: false,
				}
			})
			.sort((a, b) => b.amount - a.amount)
		maxWithdrawCount.value = cardData.data.filter((card) => card.ID === 37)[0]
		maxCount.value = Math.abs(cardData.data.filter((card) => card.ID === 37)[0].content.split(':')[0])
		

				
	}
	
	
	const withdrawalApplys = async () => {
	// 550
		if (baseData.withdrawForm.points < 550 && baseData.withdrawForm.Charge > 0 && !quickRechargeClick.value) {
			uni.showToast({
				title: t('The minimum withdrawal amount is 550 points'),
				icon: 'none',
			})
			return 
		}
		
		if (
			parseInt(String(baseData.wallet.totalPoints), 10) >=
			parseInt(String(baseData.withdrawForm.points),10)
		) {
			// 检查是否有多个渠道需要选择
			if (multiChannelresult.value.length > 1) {
				baseData.showChannelSelect = true
				return
			}

			// 执行提现申请
			await executeWithdrawal()
		}else{
			uni.showToast({
				title: t('Insufficient Balance'),
				icon: 'none',
			})
		}
	}

	// 执行提现申请的方法
	const executeWithdrawal = async () => {
		let ress: any
		
		// params.value.platform=selPlatformNum.value;
		if (!quickRechargeClick.value) {
			ress = await withdrawalApply({
				points: baseData.withdrawForm.points,
				fixed_value:
					baseData.withdrawForm.Charge > 0
						? add(baseData.withdrawForm.points, baseData.withdrawForm.Charge)
						: undefined,
				fixed_key: maxWithdrawCount.value.fixedKey,
				...params.value,
			})
		}

		if (quickRechargeClick.value) {
			ress = await withdrawalApply({
				points: baseData.withdrawForm.points,
				fixed_value: baseData.withdrawForm.Charge > 0 ? baseData.withdrawForm.actual : undefined,
				fixed_key: baseData.withdrawForm.fixedKey,
				...params.value,
			})
		}
		if (ress && ress.code == 0) {
			uni.showToast({
				title: t('Application Successful'),
				icon: 'none',
			})
			baseData.showDetail = false
			initPage()
		} else if (ress && ress.code === 7) {

			uni.showToast({
				title: ress.msg, 
				icon: 'none',
			})
		} else {
			uni.showToast({
				title:
					t('Starting from') +
					(baseData.thresholdNum + Math.floor(baseData.thresholdNum * (baseData.serviceCharges / 100))) +
					t('points'),
				icon: 'none',
			})
		}
	}
	const rightClick = () => {
		if (query.value.prevPage === 'home') {
			uni.reLaunch({
				url: '/pages/index/index',
			})
			return;
		} else {
			uni.reLaunch({
				url: '/pages/user/index',
			})
		}
	}
	

	const navAddBank = (platform?: any) => {
		// 如果传入了platform参数，说明是修改银行卡，直接跳转
		if (platform !== undefined && country.value == 1) {
			uni.setStorageSync('platform', platform);
			uni.navigateTo({
				url: '/pages/withdraw/addBank/index',
			})
			return
		}
		
		// 如果是印度国家且有多个渠道，显示渠道选择弹窗
		if (country.value == 1 && multiChannelresult.value.length > 1) {
			baseData.showChannelSelect = true
			return
		}
		
		// 直接跳转到对应的添加银行卡页面
		if (country.value == 1) {
			uni.navigateTo({
				url: '/pages/withdraw/addBank/index',
			})
		}
		if (country.value == 2 ) {
			uni.navigateTo({
				url: '/pages/withdraw/addBank/Indonesia',
			})
		}
		if (country.value == 3) {
			uni.navigateTo({
				url: '/pages/withdraw/addBank/Nigeria',
			})
		}
		if (country.value == 4) {
			uni.navigateTo({
				url: '/pages/withdraw/addBank/Bangladesh',
			})
		}
		if (country.value == 5) {
			uni.navigateTo({
				url: '/pages/withdraw/addBank/Pakistan',
			})
		}
	}
const exchangeRate=ref(1);
	const amountItemClick = (item: any, index: number) => {

		if (baseData?.wallet?.totalPoints < item.amount) return

		if (index === currentWithdrawAmountIndex.value) {
			withdrawAmounts.value[index].active = !withdrawAmounts.value[index].active
			quickRechargeClick.value = withdrawAmounts.value[index].active
			withdrawBtnDisabled.value = baseData.wallet.totalPoints < 550
			return
		}
		withdrawAmounts.value = withdrawAmounts.value.map((withdrawAmountsItem, withdrawAmountsIndex) => {
			return {
				...withdrawAmountsItem,
				active: index === withdrawAmountsIndex,
			}
		})
		withdrawBtnDisabled.value = false
		quickRechargeClick.value = true
		currentWithdrawAmountIndex.value = index
		promptAmount.value = item.reate*exchangeRate.value;
		promptAmountActual.value =  item.reate*exchangeRate.value;
	}
	

	// 选择渠道的方法
	const selectChannel = async (channel: any) => {
		// 如果没有银行卡，引导用户添加银行卡
		if (!channel.hasBankCard) {
			baseData.showChannelSelect = false
			// uni.showToast({
			// 	title: t('Please add bank card for this channel first'),
			// 	icon: 'none',
			// })
			// 根据渠道的platform跳转到对应的添加银行卡页面
			navigateToAddBankForChannel(channel)
			return
		}
		
		baseData.selectedChannel = channel
		baseData.showChannelSelect = false
		
		// 更新params参数
		params.value.country = channel.country
		params.value.platform = channel.platform
		params.value.channel_id = channel.id
		
		// 更新银行卡信息
		baseData.cards = channel.bankCard
		baseData.cardsTwo = null
		
		// 执行提现申请
		await executeWithdrawal()
	}
	
	// 根据渠道跳转到对应的添加银行卡页面
	const navigateToAddBankForChannel = (channel: any) => {
		uni.setStorageSync('platform', channel.platform);
		// 根据渠道的platform决定跳转页面
		if (channel.platform === 7) {
			// UPI渠道
			uni.navigateTo({
				url: '/pages/withdraw/addBank/index',
			})
			
		} else if (channel.platform === 0) {
			// 银行渠道
			uni.navigateTo({
				url: '/pages/withdraw/addBank/index',
			})
			
		} else {
			// 默认跳转
			uni.navigateTo({
				url: '/pages/withdraw/addBank/index',
			})
		}
	}
	
	// 检查渠道对应的银行卡
	const checkBankCardForChannel = async (channel: any) => {
		try {
			const res = await bankCardInfo({ 
				country: channel.country, 
				platform: channel.platform 
			})
			if (res.code == 0 && res.data && res.data.length > 0) {
				// 更新银行卡信息
				if (res.data.length > 1) {
					baseData.cards = res.data[0] || null
					baseData.cardsTwo = res.data[1] || null
				} else {
					baseData.cards = res.data[0] || null
				}
				return true
			}
			return false
		} catch (error) {
			// console.error('检查银行卡失败:', error)
			return false
		}
	}

	const country=ref(1)

	onMounted(() => {
		uni.setNavigationBarTitle({
			title: 'Ttask!' + t('Earn money so easy') + '!', 
		})
		symbol.value = uni.getStorageSync('symbol');
		lang.value = uni.getStorageSync('langs') || 'en'; 
		country.value=uni.getStorageSync('country') || 1;
		exchangeRate.value=uni.getStorageSync('exchangeRate') || 1;
		uni.setStorageSync('platform',selPlatformNum.value);
		initPage()
	})

	watch(
		() => baseData?.wallet?.totalPoints,
		() => {
			withdrawAmounts.value = withdrawAmounts.value.map((item) => {
				return {
					...item,
					isDisabled: item?.amount > baseData?.wallet?.totalPoints,
				}
			})
		},
		{ deep: true, immediate: true }
	)
</script>

<template>
  <view class="withdraw-container">
    <!--  -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
      <view class="floating-shape shape-1"></view>
      <view class="floating-shape shape-2"></view>
      <view class="floating-shape shape-3"></view>
    </view>

    <view class="main-content">
            <!--  -->
            <view class="balance-card">
        <!--  -->
        <view class="card-decoration">
          <view class="decoration-circle circle-1"></view>
          <view class="decoration-circle circle-2"></view>
          <view class="decoration-circle circle-3"></view>
          <view class="decoration-pattern"></view>
        </view>
        
        <!--  -->
        <view class="card-content">
          <view class="balance-header">
            <view class="header-left">
              <view class="balance-icon"></view>
              <text class="balance-title">{{ t('Available Balance') }}</text>
            </view>
            <view class="header-right">
              <view class="status-indicator"></view>
            </view>
          </view>
          
          <view class="balance-amount-section">
            <view class="amount-wrapper">
              <text class="currency">{{symbol}}</text>
              <text class="amount">{{ convertNumbers(baseData.wallet.totalPoints ,exchangeRate)}}</text>
            </view>
            <view class="amount-glow"></view>
          </view>
          
          <view class="balance-footer">
            <view class="frequency-info">
              <view class="frequency-icon">🔄</view>
              <text class="frequency-text">
                {{ t('Daily withdrawal frequency') }}: 
                <text class="frequency-count">{{ baseData.wallet.dailyWithdrawalFrequency }}</text>
                {{ t('times') }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <!--  -->
      <view class="quick-withdraw-section">
        <view class="section-title">{{ t('Quick Withdraw') }}</view>
        
        <view class="amount-grid">
          <view 
            v-for="(item, index) in withdrawAmounts" 
            :key="index"
            class="amount-card"
            :class="['amount-option', item.isDisabled ? '' : 'disabled_box', item.active ? 'active_box' : '']"
            @click="amountItemClick(item, index)"
          >
            <view class="amount-header">
              <text class="amount-value">{{symbol}} {{ Math.floor((item.amount / 100) * exchangeRate) }} </text>
              <view class="amount-badge" >
                <text class="badge-text"  v-if="item.diffValue == 0">{{ t('No Fee') }}</text>
              </view>
            </view>
            <view class="amount-details">
              <text class="receive-text">{{ t('You receive') }}: {{symbol}}{{Math.floor( (item.actual/100)*exchangeRate) }}</text>
              <text class="fee-text">{{ t('Fee') }}:{{symbol}}{{ Math.floor((item.diffValue/100)*exchangeRate) }}</text>
            </view>
          </view>
        </view>
        
        <!--  all  -->
        <view class="withdraw-all-section">
          <view 
            class="withdraw-all-card"
            :class="{ 
              disabled: baseData.wallet.totalPoints < 1000,
              selected: false
            }"
            @click="withdrawAllshow"
          >
            <view class="all-card-content">
              <view class="all-card-left">
                <view class="all-icon"><img  src="@/static/img/money.png"/></view>
                <view class="all-text-info">
                  <text class="all-title">{{ t('Withdraw All') }}</text>
                  <text class="all-subtitle">{{ t('Exceeding') }} {{ (maxCount || 0)/100*exchangeRate }} {{ t('Can withdraw all') }}</text>
                  <text class="all-subtitle">{{ t('you can withdraw all without any fees') }}</text>
                </view>
              </view>
              <view class="all-card-right">
                <view class="all-badge">
                  <text class="all-badge-text">{{ t('All') }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!--  -->
      <view class="account-section">
        <view class="section-title">{{ t('Withdrawal Account') }}</view>
        
       <view v-if="[baseData.cards, baseData.cardsTwo].some(c => c && c.ID)">
         <view v-for="card in [baseData.cards, baseData.cardsTwo].filter(c => c && c.ID)" 
               :key="card.ID" 
               class="bank-card" 
               @click="navAddBank(card.platform)">
           <view class="card-left">
             <view class="bank-icon"><img src="@/static/img/bank.png"/></view>
             <view class="card-info">
               <text class="card-number">{{ card.account_num }}</text>
               <text class="bank-name">{{ card.holder_name }}</text>
             </view>
           </view>
           <view class="card-right">
             <text class="edit-text">{{ t('Edit') }}</text>
           </view>
         </view>
       </view>
       
       <view v-else class="add-card-btn" @click="navAddBank()">
         <text class="add-icon">+</text>
         <text class="add-text">{{ t('Add Bank Card') }}</text>
       </view>

      </view>
    </view>

    <!--  -->
    <view class="withdraw-button-container">
      <view 
        class="withdraw-button" 
        :class="{ disabled: withdrawBtnDisabled }"
        @click="showW"
      >
        <text class="button-text">{{ t('Withdraw Now') }}</text>
      </view>
    </view>

    <!--  -->
    <up-popup  :show="baseData.showDetail"
      @close="baseData.showDetail = false"
      :round="10"
      class="custom-width-bottom"
      mode="bottom"
      :closeable="true">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{ t('Withdrawal Details') }}</text>
        </view>
        
        <view class="detail-list">
          <view class="detail-item">
            <text class="detail-label">{{ t('Withdrawal Amount') }}</text>
           <text class="detail-value">{{symbol}}{{ Math.floor(baseData.withdrawForm.points / 100 * exchangeRate) }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">{{ t('Service Fee') }}</text>
            <text class="detail-value">{{symbol}}{{ baseData.withdrawForm.Charge/100*exchangeRate }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">{{ t('You will receive') }}</text>
           <text class="detail-value">{{ symbol }}{{ Math.floor(baseData.withdrawForm.actual / 100 * exchangeRate * 100) / 100 }}</text>
          </view>
          <view class="detail-item total">
            <!-- <text class="detail-label">{{ t('Total Deduction') }}</text>
            <text class="detail-value">₹{{ baseData.withdrawForm.points }}</text> -->
          </view>
        </view>

        <view class="confirm-button" @click="withdrawalApplys">
          <text class="confirm-text">{{ t('Confirm Withdrawal') }}</text>
        </view>
      </view>
    </up-popup>

    <!-- 渠道选择弹窗 -->
    <up-popup :show="baseData.showChannelSelect"
      @close="baseData.showChannelSelect = false"
      :round="10"
      class="custom-width-bottom"
      mode="bottom"
      :closeable="true">
      <view class="channel-select-content">
        <view class="popup-header">
          <text class="popup-title">{{ t('Select Withdrawal Channel') }}</text>
        </view>
        
        <view class="channel-list">
          <view 
            v-for="(channel, index) in multiChannelresult" 
            :key="channel.id"
            class="channel-item"
            :class="{ 'disabled': !channel.hasBankCard }"
            @click="selectChannel(channel)"
          >
            <view class="channel-left">
              <!-- <view class="channel-icon">🏦</view> -->
              <view class="channel-info">
                <text class="channel-title">{{ channel.title }}</text>
                <!-- <text class="channel-desc">{{ t('Platform') }}: {{ channel.platform === 7 ? 'UPI' : 'Bank' }}</text> -->
                <text class="bank-status" :class="{ 'has-card': channel.hasBankCard, 'no-card': !channel.hasBankCard }">
                  <template v-if="channel.hasBankCard">
                    {{ channel.bankCard.holder_name }}: {{ channel.bankCard.account_num }}
                  </template>
                  <template v-else>
                    {{ t('No bank card') }}
                  </template>
                </text>
              </view>
            </view>
            <view class="channel-right">
              <text class="select-text" v-if="channel.hasBankCard">{{ t('Select') }}</text>
              <text class="add-card-text" v-else>{{ t('Add Card') }}</text>
            </view>
          </view>
        </view>
      </view>
    </up-popup>

    <!-- Telegram  -->
    <a :href="baseData.aircraftUrl" target="_blank">
      <img class="telegram-fixed-icon" src="@/static/teltgram.png" />
    </a>

    <!--  -->
    <view class="bottom-nav">
      <up-tabbar :value="pageIndex" :fixed="false" :placeholder="false" :safeAreaInsetBottom="false">
        <up-tabbar-item text="" @click="changMainPage(0)">
          <template #inactive-icon>
            <image class="nav-icon-img" src="@/static/img/h_1.png" mode="aspectFit"></image>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="" @click="changPage(1)">
          <template #inactive-icon>
            <image class="nav-icon-img" src="@/static/img/scan_1.png" mode="aspectFit"></image>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="" @click="changPage(3)">
          <template #inactive-icon>
            <image class="nav-icon-img " src="@/static/img/w_2.png" mode="aspectFit"></image>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="" @click="changMainPage(2)">
          <template #inactive-icon>
            <image class="nav-icon-img" src="@/static/img/m_1.png" mode="aspectFit"></image>
          </template>
        </up-tabbar-item>
      </up-tabbar>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.withdraw-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow-x: hidden;
  padding-bottom: 180rpx; // 
}

// 
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;

  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
  }

  .circle-1 {
    width: 200rpx;
    height: 200rpx;
    top: 15%;
    right: -50rpx;
    animation: float 6s ease-in-out infinite;
  }

  .circle-2 {
    width: 150rpx;
    height: 150rpx;
    bottom: 25%;
    left: -30rpx;
    animation: float 8s ease-in-out infinite reverse;
  }

  .circle-3 {
    width: 100rpx;
    height: 100rpx;
    top: 60%;
    right: 20%;
    animation: float 10s ease-in-out infinite;
  }

  .floating-shape {
    position: absolute;
    font-size: 40rpx;
    animation: bounce 3s ease-in-out infinite;
  }

  .shape-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
  }

  .shape-2 {
    top: 50%;
    right: 15%;
    animation-delay: 1s;
  }

  .shape-3 {
    bottom: 30%;
    left: 20%;
    animation-delay: 2s;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

// 
.main-content {
  position: relative;
  z-index: 1;
  padding: 40rpx 30rpx;
}


//  - 
.balance-card {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: 30rpx;
  padding: 0;
  margin-bottom: 40rpx;
  overflow: hidden;
  box-shadow: 
    0 20rpx 60rpx rgba(102, 126, 234, 0.4),
    0 10rpx 30rpx rgba(118, 75, 162, 0.3),
    inset 0 2rpx 0 rgba(255, 255, 255, 0.3);
  animation: card-glow 3s ease-in-out infinite alternate;

  // 
  .card-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;

    .decoration-circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20rpx);

      &.circle-1 {
        width: 120rpx;
        height: 120rpx;
        top: -30rpx;
        right: -30rpx;
        animation: rotate 20s linear infinite;
      }

      &.circle-2 {
        width: 80rpx;
        height: 80rpx;
        bottom: 20rpx;
        left: 30rpx;
        animation: rotate 15s linear infinite reverse;
      }

      &.circle-3 {
        width: 60rpx;
        height: 60rpx;
        top: 50%;
        right: 20rpx;
        animation: pulse 2s ease-in-out infinite;
      }
    }

    .decoration-pattern {
      position: absolute;
      top: 0;
      right: 0;
      width: 200rpx;
      height: 200rpx;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
      border-radius: 50%;
      transform: translate(50%, -50%);
      animation: pattern-glow 4s ease-in-out infinite alternate;
    }
  }

  // 
  .card-content {
    position: relative;
    z-index: 2;
    padding: 40rpx;

    .balance-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;

      .header-left {
        display: flex;
        align-items: center;
        gap: 15rpx;

        .balance-icon {
          font-size: 40rpx;
          animation: icon-bounce 2s ease-in-out infinite;
        }

        .balance-title {
          font-size: 28rpx;
          color: rgba(255, 255, 255, 0.9);
          font-weight: 500;
          text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
        }
      }

      .header-right {
        .status-indicator {
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
          background: #00ff88;
          box-shadow: 
            0 0 20rpx #00ff88,
            0 0 40rpx rgba(0, 255, 136, 0.5);
          animation: status-pulse 2s ease-in-out infinite;
        }
      }
    }

    .balance-amount-section {
      position: relative;
      margin-bottom: 30rpx;

      .amount-wrapper {
        display: flex;
        align-items: baseline;
        justify-content: center;
        position: relative;
        z-index: 2;

        .currency {
          font-size: 40rpx;
          color: #ffd700;
          font-weight: bold;
          margin-right: 10rpx;
          text-shadow: 
            0 0 20rpx rgba(255, 215, 0, 0.8),
            0 4rpx 15rpx rgba(0, 0, 0, 0.3);
          animation: currency-glow 2s ease-in-out infinite alternate;
        }

        .amount {
          font-size: 60rpx;
          color: white;
          font-weight: bold;
          text-shadow: 
            0 0 30rpx rgba(255, 255, 255, 0.8),
            0 4rpx 20rpx rgba(0, 0, 0, 0.4);
          animation: amount-pulse 3s ease-in-out infinite;
        }
      }

      .amount-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300rpx;
        height: 100rpx;
        background: radial-gradient(ellipse, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        border-radius: 50%;
        animation: glow-expand 3s ease-in-out infinite;
      }
    }

    .balance-footer {
      .frequency-info {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10rpx;

        .frequency-icon {
          font-size: 24rpx;
          animation: rotate 3s linear infinite;
        }

        .frequency-text {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.8);
          text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);

          .frequency-count {
            color: #ffd700;
            font-weight: bold;
            text-shadow: 0 0 15rpx rgba(255, 215, 0, 0.6);
          }
        }
      }
    }
  }
}

// 
.quick-withdraw-section {
	z-index: 999;
  margin-bottom: 40rpx;

  .section-title {
    font-size: 32rpx;
    color: white;
    font-weight: bold;
    margin-bottom: 30rpx;
  }

  .amount-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    margin-bottom: 30rpx;

    .amount-card {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 20rpx;
      padding: 25rpx;
      border: 2rpx solid transparent;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: translateX(-100%);
        transition: transform 0.6s ease;
      }

      &:hover::before {
        transform: translateX(100%);
      }

      &.active_box {
        border-color: #fff;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        transform: scale(1.05);
        box-shadow: 
        0 0 20rpx #dda0dd, /*  */
        0 0 40rpx rgba(221, 160, 221, 0.5); /*  */

        animation: glow-pulse 2s ease-in-out infinite alternate;

        .amount-value {
          color: #fff !important;
          // text-shadow: 0 0 20rpx rgba(16, 185, 129, 0.5);
        }

        .receive-text,
        .fee-text {
          color: #fff !important;
        }

        .amount-badge {
          background: #fff !important;
          color: white !important;
          animation: badge-pulse 1.5s ease-in-out infinite;
        }
      }

      &.disabled_box {
        opacity: 0.4;
        cursor: not-allowed;
        background: rgba(200, 200, 200, 0.3);
        border-color: #ccc;
        
        .amount-value,
        .receive-text,
        .fee-text {
          color: #fff !important;
        }
        
        .amount-badge {
          background: #ccc !important;
          
          .badge-text {
            color: #666 !important;
          }
        }
      }

      .amount-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15rpx;

        .amount-value {
          font-size: 32rpx;
          color: #333;
          font-weight: bold;
        }

        .amount-badge {
          background: #10b981;
          color: white;
          padding: 4rpx 12rpx;
          border-radius: 12rpx;
          font-size: 20rpx;
          font-weight: 600;

          .badge-text {
            font-size: 20rpx;
          }
        }
      }

      .amount-details {
        .receive-text,
        .fee-text {
          display: block;
          font-size: 24rpx;
          color: #666;
          margin-bottom: 5rpx;
        }
      }
    }
  }

  // 
  .withdraw-all-section {
    .withdraw-all-card {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
      border: 2rpx solid #ffd700;
      border-radius: 20rpx;
      padding: 30rpx;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &.selected {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        border-color: #fff;
        transform: scale(1.02);
        box-shadow: 
  0 0 20rpx #dda0dd, /*  */
  0 0 40rpx rgba(221, 160, 221, 0.5); /*  */

        animation: golden-glow 2s ease-in-out infinite alternate;

        .all-title {
          color: #ff8c00 !important;
          text-shadow: 0 0 20rpx rgba(255, 215, 0, 0.8);
        }

        // .all-subtitle {
        //   color: rgba(255, 140, 0, 0.9) !important;
        // }

        .all-badge {
          background: #ff8c00 !important;
          animation: badge-pulse 1.5s ease-in-out infinite;
          box-shadow: 0 0 20rpx rgba(255, 215, 0, 0.6);
        }

        .all-icon {
          animation: float 3s ease-in-out infinite;
        }
      }

      &.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: rgba(200, 200, 200, 0.2);
        border-color: #ccc;
      }

      .all-card-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .all-card-left {
          display: flex;
          align-items: flex-start;
          flex: 1;

          .all-icon {
            font-size: 48rpx;
            margin-right: 20rpx;
            margin-top: 5rpx;
          }

          .all-text-info {
            flex: 1;

            .all-title {
              display: block;
              font-size: 32rpx;
              color: white;
              font-weight: bold;
              margin-bottom: 12rpx;
            }

            .all-subtitle {
              display: block;
              font-size: 22rpx;
              color: rgba(255, 255, 255, 0.8);
              line-height: 1.4;
              margin-bottom: 6rpx;
              
              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }

        .all-card-right {
          .all-badge {
            background: #ffd700;
            border-radius: 15rpx;
            padding: 8rpx 16rpx;
            display: inline-block;

            .all-badge-text {
              font-size: 24rpx;
              color: #333;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}

// 
.account-section {
  margin-bottom: 40rpx;

  .section-title {
    font-size: 32rpx;
    color: white;
    font-weight: bold;
    margin-bottom: 30rpx;
  }

  .bank-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border-radius: 20rpx;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
	margin-bottom: 5px;

    &:active {
      transform: scale(0.98);
    }

    .card-left {
      display: flex;
      align-items: center;

      .bank-icon {
        font-size: 48rpx;
        margin-right: 20rpx;
      }

      .card-info {
        .card-number {
          display: block;
          font-size: 28rpx;
          color: white;
          font-weight: bold;
          margin-bottom: 8rpx;
        }

        .bank-name {
          font-size: 24rpx;
          color: white;
        }
      }
    }

    .card-right {
      .edit-text {
        font-size: 26rpx;
        color: white;
        font-weight: 600;
      }
    }
  }

  .add-card-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2rpx dashed rgba(255, 255, 255, 0.5);
    border-radius: 20rpx;
    padding: 40rpx;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
    }

    .add-icon {
      font-size: 48rpx;
      color: white;
      margin-bottom: 15rpx;
    }

    .add-text {
      font-size: 28rpx;
      color: white;
      font-weight: 500;
    }
  }
}

// 
.withdraw-button-container {
  bottom: 100rpx; // 
  left: 20rpx;
  right: 20rpx;
  padding: 0 10rpx;
  z-index: 10;

  .withdraw-button {
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 25rpx;
    padding: 25rpx 30rpx;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
    }

    &:hover::before {
      left: 100%;
    }

    &:active {
      transform: scale(0.98);
    }

    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .button-text {
      font-size: 30rpx;
      color: white;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

// 
.bottom-nav {
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: var(--uni-app-max-width);

  .nav-icon-img {
    width: 60rpx;
    height: 60rpx;
    transition: all 0.3s ease;

    &.active {
      transform: scale(1.2);
      filter: brightness(1.2);
    }
  }
}

// 
.popup-content {
  background: white;
  border-radius: 25rpx 25rpx 0 0;
  padding: 40rpx;
  min-height: 400rpx;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f1f5f9;

    .popup-title {
      font-size: 36rpx;
      color: #333;
      font-weight: bold;
    }

    .close-btn {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #64748b;
      cursor: pointer;
    }
  }

  .detail-list {
    margin-bottom: 40rpx;

    .detail-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25rpx 0;
      border-bottom: 1rpx solid #f8fafc;

      &.total {
        border-bottom: none;
        padding-top: 30rpx;
        margin-top: 20rpx;
        border-top: 2rpx solid #10b981;

        .detail-label,
        .detail-value {
          font-weight: bold;
          font-size: 32rpx;
          color: #10b981;
        }
      }

      .detail-label {
        font-size: 28rpx;
        color: #666;
      }

      .detail-value {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
  }

  .confirm-button {
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 25rpx;
    padding: 35rpx;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
    }

    .confirm-text {
      font-size: 32rpx;
      color: white;
      font-weight: bold;
    }
  }
}



// 
@keyframes wave {
  0%, 100% { 
    transform: translateX(-50%) translateY(0px) rotate(0deg); 
  }
  50% { 
    transform: translateX(-50%) translateY(-20px) rotate(5deg); 
  }
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg); 
  }
  50% { 
    transform: translateY(-15px) rotate(180deg); 
  }
}

@keyframes glow-pulse {
  0% {
    box-shadow: 
      0 0 40rpx rgba(221, 160, 221, 0.6), /*  */
      0 0 80rpx rgba(221, 160, 221, 0.3); /*  */
  }
  100% {
    box-shadow: 
      0 0 60rpx rgba(221, 160, 221, 0.8), /*  */
      0 0 120rpx rgba(221, 160, 221, 0.5); /*  */
  }
}


@keyframes golden-glow {
 0% {
    box-shadow: 
      0 0 40rpx rgba(221, 160, 221, 0.6), /*  */
      0 0 80rpx rgba(221, 160, 221, 0.3); /*  */
  }
  100% {
    box-shadow: 
      0 0 60rpx rgba(221, 160, 221, 0.8), /*  */
      0 0 120rpx rgba(221, 160, 221, 0.5); /*  */
  }
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

// 渠道选择弹窗样式
.channel-select-content {
  background: white;
  border-radius: 25rpx 25rpx 0 0;
  padding: 40rpx;
  min-height: 300rpx;

  .channel-list {
    margin-top: 30rpx;

    .channel-item {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
      border-radius: 20rpx;
      padding: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-bottom: 20rpx;

      &:active {
        transform: scale(0.98);
      }

      &.disabled {
        // opacity: 0.6;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        // cursor: not-allowed;
      }

      .channel-left {
        display: flex;
        align-items: center;

        .channel-icon {
          font-size: 48rpx;
          margin-right: 20rpx;
        }

        .channel-info {
          .channel-title {
            display: block;
            font-size: 28rpx;
            color: white;
            font-weight: bold;
            margin-bottom: 8rpx;
          }

          .channel-desc {
            font-size: 24rpx;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 5rpx;
          }

          .bank-status {
            font-size: 22rpx;
            font-weight: 500;
            
            &.has-card {
              color: #00ff88;
            }
            
            &.no-card {
              color: #ff6b6b;
            }
          }
        }
      }

      .channel-right {
        .select-text {
          font-size: 26rpx;
          color: white;
          font-weight: 600;
        }

        .add-card-text {
          font-size: 26rpx;
          color: #ffffff;
          font-weight: 600;
        }
      }
    }
  }
}
img{
	width: 35px;
	height: 35px;
}
</style>